<template>
    <div class="car">
        <h2> 品牌：{{ car.brand }}</h2>
        <h2> 价格：{{ car.price }}</h2>
        <button @click="changPrice">修改汽车价格</button>

        <h2>游戏列表:
            <ul>
               <li v-for="g in games" :key="g.id">
                {{ g.id }}:{{ g.name }}
               </li> 
            </ul>
        </h2>
        <button @click="changeGameName">修改第一个游戏的名字</button>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue"

let car = reactive({ brand: '奔驰', price: 1000 })

let games = reactive([
    {id:1,name:'pubg'},
    {id:2,name:'联盟'},
    {id:3,name:'lol'}
])

function changPrice() {
    car.price += 1000
}

function changeGameName(){
    games[0].name = '摩尔庄园'
}

</script>

<style lang="scss" scoped>
.car {
    background-color: gray;
    box-shadow: 0 0 10 px;
    border-radius: 10px;
    color: white;
    padding: 20px;
}

button {
    margin: 0 5px;
}
</style>
